<template>
  <div class="scoreList">
    <!-- 成绩榜单 -->
    <div class="searchBox">
      <div class="box1">
        <el-select
          v-model="selectScore.scoreId"
          clearable
          placeholder="请选择评分表"
        >
          <el-option
            v-for="item in scoreList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="box1 box11">
        <el-select
          v-model="selectScore.departmentId"
          clearable
          placeholder="请选择组织机构"
        >
          <el-option
            v-for="item in organizationList"
            :key="item.departmentId"
            :label="item.departmentName"
            :value="item.departmentId"
          >
          </el-option>
        </el-select>
      </div>
      <button @click="searchBtn">查询</button>
    </div>
    <div class="scoreStatistics scoreStatistics1" v-if="isStu !== 4">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>学生等级分布</span>
        </div>
        <div class="stuBox">
          <div class="cansBox1">
            <stuCan
              v-loading="loading"
              :selectScoreList.sync="selectScoreList"
            ></stuCan>
          </div>
        </div>
      </el-card>
    </div>
    <div class="scoreStatistics" v-else>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>学生等级分布</span>
        </div>
        <div class="leftBox">
          <div class="cansBox" v-loading="loading">
            <leftCan
              v-if="tuVos1.list && tuVos1.list.length > 0"
              :tuVos1.sync="tuVos1.list"
            ></leftCan>
          </div>
          <div class="nameBox">{{ tuVos1.title }}</div>
          <div class="bottomBox">
            <div class="blurBox">
              <div class="collegeBox">
                <span class="box1"></span>
                <span>班级平均</span>
              </div>
              <div class="classBox">
                <span class="box2"></span>
                <span>个人成绩</span>
              </div>
            </div>
          </div>
        </div>
        <div class="midBox">
          <div class="cansBox" v-loading="loading">
            <midCan
              v-if="tuVos2.list && tuVos2.list.length > 0"
              :tuVos2.sync="tuVos2.list"
            ></midCan>
          </div>
          <div class="nameBox">{{ tuVos2.title }}</div>
          <div class="bottomBox">
            <div class="blurBox">
              <div class="collegeBox">
                <span class="box1"></span>
                <span>班级平均</span>
              </div>
              <div class="classBox">
                <span class="box2"></span>
                <span>个人成绩</span>
              </div>
            </div>
          </div>
        </div>
        <div class="rightBox">
          <div class="cansBox" v-loading="loading">
            <rightCan
              v-if="tuVos3.list && tuVos3.list.length > 0"
              :tuVos3.sync="tuVos3.list"
            ></rightCan>
          </div>
          <div class="nameBox">{{ tuVos3.title }}</div>
          <div class="bottomBox">
            <div class="blurBox">
              <div class="collegeBox">
                <span class="box1"></span>
                <span>班级平均</span>
              </div>
              <div class="classBox">
                <span class="box2"></span>
                <span>个人成绩</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div
      class="scoreStatistics"
      :class="isStu === 4 ? 'scoreStatistics2' : 'scoreStatistics3'"
    >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>学生综合能力排行</span>
        </div>
        <div class="leftBox leftBox1">
          <div class="topBox">{{ paiming1.name }}</div>
          <el-table
            v-loading="loading"
            :data="data1"
            :header-cell-style="{
              color: '#333',
              fontWeight: '400',
              fontSize: '12px',
              height: '30px',
              padding: '0',
            }"
            :row-class-name="tableRowClassName"
            style="width: 100%"
          >
            <el-table-column type="index" label="排名" width="80">
            </el-table-column>
            <el-table-column prop="userName" label="学生姓名">
            </el-table-column>
            <el-table-column prop="sum" label="得分" width="120">
            </el-table-column>
          </el-table>
          <div class="iBox iBox1" v-if="isStu === 4">
            <div class="box1" style="width: 80px">{{ paiming1.myRanking }}</div>
            <div class="box2" style="width: calc(100% - 200px)">
              {{ paiming1.userName }}
            </div>
            <div class="box3">{{ paiming1.sum }}</div>
          </div>
        </div>
        <div class="midBox midBox1">
          <div class="topBox">{{ paiming2.name }}</div>
          <el-table
            v-loading="loading"
            :data="data2"
            :header-cell-style="{
              color: '#333',
              fontWeight: '400',
              fontSize: '12px',
              height: '30px',
              padding: '0',
            }"
            :row-class-name="tableRowClassName"
            style="width: 100%"
          >
            <el-table-column type="index" label="排名" width="80">
            </el-table-column>
            <el-table-column prop="userName" label="学生姓名">
            </el-table-column>
            <el-table-column prop="sum" label="得分" width="120">
            </el-table-column>
          </el-table>
          <div class="iBox iBox2" v-if="isStu === 4">
            <div class="box1" style="width: 80px">{{ paiming2.myRanking }}</div>
            <div class="box2" style="width: calc(100% - 200px)">
              {{ paiming2.userName }}
            </div>
            <div class="box3">{{ paiming2.sum }}</div>
          </div>
        </div>
        <div class="rightBox rightBox1">
          <div class="topBox">{{ paiming3.name }}</div>
          <el-table
            v-loading="loading"
            :data="data3"
            :header-cell-style="{
              color: '#333',
              fontWeight: '400',
              fontSize: '12px',
              height: '30px',
              padding: '0',
            }"
            :row-class-name="tableRowClassName"
            style="width: 100%"
          >
            <el-table-column type="index" label="排名" width="80">
            </el-table-column>
            <el-table-column prop="userName" label="学生姓名">
            </el-table-column>
            <el-table-column prop="sum" label="得分" width="120">
            </el-table-column>
          </el-table>
          <div class="iBox iBox3" v-if="isStu === 4">
            <div class="box1" style="width: 80px">{{ paiming3.myRanking }}</div>
            <div class="box2" style="width: calc(100% - 200px)">
              {{ paiming3.userName }}
            </div>
            <div class="box3">{{ paiming3.sum }}</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import leftCan from '@/components/repcard/commonMis/scoreStatisticsEarchs/leftCan.vue';
import midCan from '@/components/repcard/commonMis/scoreStatisticsEarchs/midCan.vue';
import rightCan from '@/components/repcard/commonMis/scoreStatisticsEarchs/rightCan.vue';
import stuCan from '@/components/repcard/commonMis/stuCan/stuCan.vue';
import {getSelectScoreList, getSelectScore, getSelectdepartByUser} from '@/api/repcard/repcard.js';
export default {
  name: 'ScoreList',
  components: {leftCan, midCan, rightCan, stuCan},
  props: {},
  data() {
    return {
      isStu: parseInt(sessionStorage.getItem('usertype')), // 是否是学生
      selectScore: {
        departmentId: null,
        scoreId: null
      },
      selectScoreList: [], // 学生等级分布数据
      tuVos1: {}, // 学生图表数据
      tuVos2: {}, // 学生图表数据
      tuVos3: {}, // 学生图表数据
      paiming1: {}, // 学生综合能力数据1
      paiming2: {}, // 学生综合能力数据2
      paiming3: {}, // 学生综合能力数据3
      data1: [],
      data2: [],
      data3: [],
      loading: true,
      scoreList: [], // 评分表
      organizationList: [] // 组织机构
    };
  },
  computed: {},
  created() {
    this.getSelectScore();
    // setTimeout(() => {
    //   this.getSelectScoreList();
    // }, 1000);
  },
  methods: {
    // Table 中的某一行添加 class
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 0) {
        return 'color1 color4';
      } else if (rowIndex === 1) {
        return 'color2 color4';
      } else if (rowIndex === 2) {
        return 'color3 color4';
      }
      return 'color4';
    },
    // 获取成绩榜单数据
    async getSelectScoreList() {
      // console.log(this.scoreList);
      // console.log(this.organizationList);
      if (this.scoreList.length > 0) {
        this.selectScore.scoreId = this.scoreList[0].id;
      }
      if (this.organizationList.length > 0) {
        this.selectScore.departmentId = this.organizationList[0].departmentId;
      }
      // const {data} = await getSelectScoreList(this.selectScore);
      const {data} = await getSelectScoreList(this.selectScore);
      // console.log(data);
      if (data !== null && this.isStu !== 4) {
        // console.log('1');
        this.selectScoreList = data.gradeList;
        this.paiming1 = data.paiming1;
        this.paiming2 = data.paiming2;
        this.paiming3 = data.paiming3;
        this.data1 = data.paiming1.paiming.slice(0, 10);
        this.data2 = data.paiming2.paiming.slice(0, 10);
        this.data3 = data.paiming3.paiming.slice(0, 10);
      } else if (data !== null && this.isStu === 4) {
        // console.log('2');
        this.tuVos1 = data.tuVos[0];
        this.tuVos2 = data.tuVos[1];
        this.tuVos3 = data.tuVos[2];
        this.paiming1 = data.paiming1;
        this.paiming2 = data.paiming2;
        this.paiming3 = data.paiming3;
        this.data1 = data.paiming1.paiming.slice(0, 10);
        this.data2 = data.paiming2.paiming.slice(0, 10);
        this.data3 = data.paiming3.paiming.slice(0, 10);
      }
      // console.log(this.tuVos2);
      this.loading = false;
    },
    // 获取评分表、组织机构
    async getSelectScore() {
      const {data} = await getSelectScore({userId: parseInt(sessionStorage.getItem('userid')), userType: parseInt(sessionStorage.getItem('usertype'))});
      // console.log(data);
      this.scoreList = data;
      const { data: data1 } = await getSelectdepartByUser();
      // console.log(data1);
      this.organizationList = data1;
      for (let i = 0; i < this.scoreList.length; i++) {
        if (this.scoreList[i] === null) {
          this.scoreList.splice(i, 1);
          i--;
        }
      }
      if (data.length > 0) {
        this.selectScore.scoreId = data[0].id;
      }
      if (data1.length > 0) {
        this.selectScore.departmentId = data1[0].departmentId;
      }
      this.getSelectScoreList();
    },

    // ----------------------------------------------
    // 搜索事件
    async searchBtn() {
      this.loading = true;
      const {data} = await getSelectScoreList(this.selectScore);
      // console.log(data);
      if (data !== null && this.isStu !== 4) {
        // console.log('1');
        this.selectScoreList = data.gradeList;
        this.paiming1 = data.paiming1;
        this.paiming2 = data.paiming2;
        this.paiming3 = data.paiming3;
        this.data1 = data.paiming1.paiming.slice(0, 10);
        this.data2 = data.paiming2.paiming.slice(0, 10);
        this.data3 = data.paiming3.paiming.slice(0, 10);
      } else if (data !== null && this.isStu === 4) {
        // console.log('2');
        this.tuVos1 = data.tuVos[0];
        this.tuVos2 = data.tuVos[1];
        this.tuVos3 = data.tuVos[2];
        this.paiming1 = data.paiming1;
        this.paiming2 = data.paiming2;
        this.paiming3 = data.paiming3;
        this.data1 = data.paiming1.paiming.slice(0, 10);
        this.data2 = data.paiming2.paiming.slice(0, 10);
        this.data3 = data.paiming3.paiming.slice(0, 10);
      }
      this.loading = false;
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.el-table::before {
  width: 0;
}
/deep/.el-table__cell {
  padding: 5px 0;
}
.scoreList {
  width: calc(100% - 40px);
  padding: 0 20px;
  overflow: hidden;
  .searchBox {
    // width: 850px;
    height: 32px;
    margin-bottom: 22px;
    display: flex;
    // justify-content: space-between;
    .box1 {
      position: relative;
      width: 195px;
      height: 32px;
      font-size: 12px;
    }
    .box11 {
      margin-left: 40px;
    }
    button {
      cursor: pointer;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 28px;
      width: 85px;
      height: 32px;
      background: #2fc0e0;
      border-radius: 4px;
      box-shadow: 0 0 5px #2fc0e0;
      margin-top: 5px;
      margin-left: 40px;
    }
  }
  .scoreStatistics {
    width: 100%;
    // overflow: hidden;
    /deep/ .box-card {
      width: 100%;
      margin-bottom: 22px;
      height: 532px;
      box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
      .el-card__header {
        height: 35px;
        line-height: 35px;
        background: #eaf8fb;
        padding: 0 30px;
        .clearfix {
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #2fc0e0;
          height: 35px;
          background: #eaf8fb;
        }
      }
      .el-card__body {
        height: calc(100% - 60px);
        display: flex;
        padding: 20px;
        .leftBox {
          position: relative;
          width: 33%;
          height: calc(100% - 10px);
          box-sizing: border-box;
          border-right: 1px solid #ddd;
        }
        .leftBox1 {
          padding: 0 20px;
          padding-left: 10px;
          .color4 {
            td:last-child {
              color: #795AC8;
            }
          }
        }
        .midBox {
          position: relative;
          width: 34%;
          height: calc(100% - 10px);
          box-sizing: border-box;
          border-right: 1px solid #ddd;
        }
        .midBox1 {
          padding: 0 20px;
          .color4 {
            td:last-child {
              color: #2BAFAE;
            }
          }
        }
        .rightBox {
          position: relative;
          width: 33%;
          height: calc(100% - 10px);
          box-sizing: border-box;
        }
        .rightBox1 {
          padding: 0 20px;
          padding-right: 10px;
          .color4 {
            td:last-child {
              color: #67B909;
            }
          }
        }
        .topBox {
          height: 24px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2fc0e0;
          line-height: 24px;
        }
        .iBox {
          display: flex;
          width: calc(100% - 20px);
          height: 35px;
          font-size: 12px;
          box-sizing: border-box;
          background: #f5f5f5;
          line-height: 35px;
          div {
            padding: 0 10px;
            box-sizing: border-box;
          }
        }
        .iBox1 {
          position: absolute;
          left: 5;
          bottom: 0;
          width: calc(100% - 30px);
        }
        .iBox2 {
          position: absolute;
          left: 20px;
          bottom: 0;
          width: calc(100% - 40px);
        }
        .iBox3 {
          position: absolute;
          left: 20px;
          bottom: 0;
          width: calc(100% - 30px);
        }
        .stuBox {
          width: 100%;
        }
        .cansBox {
          width: 100%;
          height: 330px;
          box-sizing: border-box;
          padding-right: 20px;
        }
        .cansBox1 {
          width: 100%;
          height: 330px;
          box-sizing: border-box;
          padding-right: 20px;
        }
        .nameBox {
          width: 100%;
          height: 30px;
          text-align: center;
          font-size: 22px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 30px;
          margin-top: 10px;
        }
        .bottomBox {
          width: 230px;
          margin: 0 auto;
          margin-top: 55px;
          .blurBox {
            display: flex;
            .collegeBox {
              font-size: 18px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #666666;
              .box1 {
                display: inline-block;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background: #8c5fdd;
              }
            }
            .classBox {
              font-size: 18px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #666666;
              margin-left: 35px;
              .box2 {
                display: inline-block;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background: #2fc0e0;
              }
            }
          }
        }
        .color1 {
          td:first-child {
            color: #ffd167;
          }
        }
        .color2 {
          td:first-child {
            color: #e07f2f;
          }
        }
        .color3 {
          td:first-child {
            color: #e68e50;
          }
        }
      }
    }
  }
  .scoreStatistics1 {
    /deep/ .box-card {
      height: 365px;
    }
  }
  .scoreStatistics2 {
    /deep/ .box-card {
      height: 518px;
    }
  }
  .scoreStatistics3 {
    /deep/ .box-card {
      height: 493px;
    }
  }
}
</style>
